iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0
自我挑戰組

學習 canvas 日記系列 第 9

第 9 天 抓取 canvas 標籤的方法

  • 分享至 

  • xImage
  •  

有可以用 id 的方法

var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');

以及沒有 id 只有 canvas 標籤時

var cvs = document.getElementsByTagName('canvas');
var ctx = cvs[0].getContext('2d');

canvas[0] 在網頁有多個 canvas 時就很好用了
[0] 是指在 HTML 裡的第幾個 canvas

又想再縮短合併成一行的話

var ctx = document.getElementById('canvas').getContext('2d');

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');

到這裡突然發現 class 好像也可以這麼做

var ctx = document.getElementsByClassName('canvas')[0].getContext('2d');

然後...終於...可以抓到相同是 class="canvas" 第幾個的畫布了

原來我在第一天時搞錯了 /images/emoticon/emoticon16.gif
居然用到了 querySelector 和 querySelectorAll 才會抓不到第2個之後的


上一篇
第 8 天 曲線
下一篇
第 10 天 插入圖片
系列文
學習 canvas 日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言